<template>
  <div class="content-cont">
    <div class="dropdown" @mouseenter="showList = true" @mouseleave="showList = false">
      <span>{{ qy }}</span>
      <ul v-if="showList">
        <li @click="changLen('全量')">全量</li>
        <li @click="changLen('广东移动东莞省级数据中心')">广东移动东莞省级数据中心</li>
        <li @click="changLen('华南大区')">华南大区</li>
      </ul>
    </div>
    <div class="top-box">
      <databox :title="''" class="top">
        <div class="top-left">模型总数</div>
        <div class="top-right">
          <strong>{{objectTotal}}</strong>
        </div>
      </databox>
      <databox :title="''" class="top">
        <div class="top-left">模型总字段数</div>
        <div class="top-right">
          <strong>{{attributeTotal}}</strong>
        </div>
      </databox>
      <databox :title="''" class="top">
        <div class="top-left">模型总实例数</div>
        <div class="top-right">
          <strong>{{instanceTotal}}</strong>
        </div>
      </databox>
    </div>
    <div class="content-box">
      <databox
        class="vLine"
        :title="'自动采集覆盖率 '+coverageTotal + '%'"
        :dheight="250"
        :icon="'account'"
        :boxb="false"
      >
        <div class="content-wapper">
          <ve-line
            :data="coverageData"
            :extend="extend"
            :settings="coverageSettings"
            :height="'250px'"
          ></ve-line>
        </div>
      </databox>
      <databox
        class="vLine"
        :title="'数据完整率 ' + tageTotal + '%'"
        :dheight="250"
        :icon="'account'"
        :boxb="false"
      >
        <div class="content-wapper">
          <ve-line :data="tageData" :extend="extend" :settings="tageSettings" :height="'250px'"></ve-line>
        </div>
      </databox>
      <databox
        class="vLine"
        :title="'数据合规率 ' + complianceTotal + '%'"
        :dheight="250"
        :icon="'account'"
        :boxb="false"
      >
        <div class="content-wapper">
          <ve-line
            :data="complianceData"
            :extend="extend"
            :settings="complianceSettings"
            :height="'250px'"
          ></ve-line>
        </div>
      </databox>
    </div>
    <div class="content-bottom">
      <databox class="vRadar" title :dheight="400" :icon="'account'">
        <ve-radar :data="radarData" :extend="radarExtend"></ve-radar>
      </databox>
      <databox class="vMessage" title :dheight="400" :icon="'account'">
        <el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="主机" name="first"></el-tab-pane>
          <el-tab-pane label="网络" name="second"></el-tab-pane>
          <el-tab-pane label="存储" name="third"></el-tab-pane>
          <el-tab-pane label="VNF" name="five"></el-tab-pane>
          <el-tab-pane label="ALL" name="all"></el-tab-pane>
        </el-tabs>
        <message :data="messege"></message>
      </databox>
    </div>
  </div>
</template>

<script>
import message from "./message";
export default {
  components: {
    message
  },
  data() {
    this.extend = {
      series: {
        label: {}
      },
      legend: {
        textStyle: {
          color: "#fff",
          normal: {
            show: true
          }
        },

        right: "6%"
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#fff"
          }
        }
      },
      xAxis: {
        axisLabel: {
          textStyle: {
            color: "#fff"
          }
        }
      }
    };
    this.coverageSettings = {
      labelMap: {
        Data: "日期",
        rate: "覆盖率%"
      }
    };
    this.tageSettings = {
      labelMap: {
        Data: "日期",
        rate: "完整率%"
      }
    };
    this.complianceSettings = {
      labelMap: {
        Data: "日期",
        rate: "合规率%"
      }
    };
    this.radarExtend = {
      title: {
        text: "不同维度占比",
        textStyle: {
          color: "rgba(221,221,221,1)", //标题颜色
          fontSize: 18,
          lineHeight: 30
        },
        // 标题的位置，此时放在图的底边
        left: "center",
        top: "bottom"
      },
      radar: {
        splitNumber: 5,
        indicator: [
          {
            name: "自动采集覆盖率",
            max: 100
          },
          { name: "数据完整率", max: 100 },
          { name: "数据合规率", max: 100 }
        ],
        splitLine: {
          lineStyle: {
            normal: {
              width: 1,
              opacity: 0.5
            },
            color: [
              "rgba(238, 197, 102, 0.1)",
              "rgba(238, 197, 102, 0.2)",
              "rgba(238, 197, 102, 0.4)",
              "rgba(238, 197, 102, 0.6)",
              "rgba(238, 197, 102, 0.8)",
              "rgba(238, 197, 102, 1)"
            ].reverse()
          }
        },
        splitArea: {
          show: false
        }
      },
      legend: {
        textStyle: { color: "#fff" },
        orient: "vertical",
        x: "right",
        y: "center"
      }
    };
    return {
      attributeTotal: null,
      objectTotal: null,
      instanceTotal: null,
      complianceTotal: null,
      coverageTotal: null,
      tageTotal: null,
      qy: "全量",
      statTime: null,
      endTime: null,
      showList: false,
      activeName: "first",
      coverageData: {
        columns: ["Data", "rate"],
        rows: []
      },
      tageData: {
        columns: ["Data", "rate"],
        rows: []
      },
      complianceData: {
        columns: ["Data", "rate"],
        rows: []
      },
      radarData: {
        columns: ["object", "自动采集覆盖率", "数据完整率", "数据合规率"],
        rows: []
      },
      assembly: [],
      network: [],
      storage: [],
      VNF: [],
      ALL: [],
      messege: []
    };
  },
  mounted() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.statTime = this.timeConversion(start);
    this.endTime = this.timeConversion(end);
    this.gettest(this.qy, this.statTime, this.endTime);
  },
  methods: {
    handleClick(tab) {
      if (tab["label"] === "主机") {
        this.messege = [];
        this.radarData.rows = [];
        this.messege = this.assembly;
        this.radarData.rows = this.assembly;
      } else if (tab["label"] === "网络") {
        this.messege = [];
        this.radarData.rows = [];
        this.messege = this.network;
        this.radarData.rows = this.network;
      } else if (tab["label"] === "存储") {
        this.messege = [];
        this.radarData.rows = [];
        this.messege = this.storage;
        this.radarData.rows = this.storage;
      } else if (tab["label"] === "VNF") {
        this.messege = [];
        this.radarData.rows = [];
        this.messege = this.VNF;
        this.radarData.rows = this.VNF;
      } else {
        this.messege = [];
        this.radarData.rows = [];
        this.messege = this.ALL;
        this.radarData.rows = this.ALL;
      }
    },
    changLen(val) {
      this.qy = val;
      this.showList = false;
      this.gettest(this.qy, this.statTime, this.endTime);
    },
    gettest(qy, statTime, endTime) {
      this.coverageData.rows = [];
      this.tageData.rows = [];
      this.complianceData.rows = [];
      this.radarData.rows = [];
      this.assembly = [];
      this.network = [];
      this.storage = [];
      this.VNF = [];
      this.ALL = [];
      let total_params =
        '{"page_size":1,"page":1,"sort": {"objectTime": -1},"query": {"$and": [{"qy": {"$eq": "' +
        qy +
        '"}}]}}';
      let total_cmdb_params =
        '{"page_size":1000,"page":1,"sort": {"objectTime": 1},"query": {"$and": [{"qy": {"$eq": "' +
        qy +
        '"}},{"objectTime": {"$gte": "' +
        statTime +
        '", "$lte": "' +
        endTime +
        '"}}]}}';
      let cmdb_params =
        '{"page_size":1000,"page":1,"sort": {"objectTime": 1},"query": {"$and": [{"qy": {"$eq": "' +
        qy +
        '"}}]}}';
      let total_cmdb_url = "/api/object/TOTAL_CMDB_STATISTIC/instance/_search";
      let cmdb_url = "/api/object/CMDB_STATISTIC/instance/_search";
      let sum = 0;
      this.$axios
        .all([
          this.$axios.post(total_cmdb_url, total_cmdb_params),
          this.$axios.post(cmdb_url, cmdb_params),
          this.$axios.post(total_cmdb_url, total_params)
        ])
        .then(
          this.$axios.spread((res1, res2, res3) => {
            // 获取总汇总数据
            console.log(res3.data);
            this.complianceTotal = res3.data.data.list[0].complianceTotal;
            this.coverageTotal = res3.data.data.list[0].coverageTotal;
            this.tageTotal = res3.data.data.list[0].tageTotal;
            //获取总模型数据信息
            let total_cmdb_statistic_list = res1.data.data.list;
            let total_cmdb_statistic = total_cmdb_statistic_list[0];
            this.objectTotal = total_cmdb_statistic.objectTotal;
            this.attributeTotal = total_cmdb_statistic.attributeTotal;
            for (
              let i = 0, len = total_cmdb_statistic_list.length;
              i < len;
              i++
            ) {
              let objecttime = total_cmdb_statistic_list[i].objectTime;
              let coverage = {
                Data: objecttime,
                rate: total_cmdb_statistic_list[i].coverageTotal
              };
              let tage = {
                Data: objecttime,
                rate: total_cmdb_statistic_list[i].tageTotal
              };
              let compliance = {
                Data: objecttime,
                rate: total_cmdb_statistic_list[i].complianceTotal
              };
              this.coverageData.rows.push(coverage);
              this.tageData.rows.push(tage);
              this.complianceData.rows.push(compliance);
            }
            //获取单个模型数据信息
            let cmdb_statistic = res2.data.data.list;
            let tage_average = this.tageTotal;
            let isshow = false;
            for (let j = 0, len = cmdb_statistic.length; j < len; j++) {
              let objectsum = cmdb_statistic[j].objectSum;
              sum = Number(sum) + Number(objectsum);
              let objectName_ = cmdb_statistic[j].objectName;
              let compliance_ = cmdb_statistic[j].compliance;
              let coverage_ = cmdb_statistic[j].coverage;
              let tage_ = cmdb_statistic[j].tage;
              if (tage_ >= tage_average) {
                isshow = false;
              } else {
                isshow = true;
              }
              if (objectName_ === "硬件服务器" || objectName_ === "虚拟机") {
                let radar_ = {
                  object: objectName_,
                  自动采集覆盖率: coverage_,
                  数据完整率: tage_,
                  数据合规率: compliance_,
                  isActive: isshow
                };
                this.assembly.push(radar_);
                this.ALL.push(radar_);
              } else if (
                objectName_ === "磁盘阵列" ||
                objectName_ === "磁阵控制器" ||
                objectName_ === "分布式存储集群" ||
                objectName_ === "分布式存储池" ||
                objectName_ === "硬盘域" ||
                objectName_ === "集中式存储池" ||
                objectName_ === "LUN"
              ) {
                let radar_ = {
                  object: objectName_,
                  自动采集覆盖率: coverage_,
                  数据完整率: tage_,
                  数据合规率: compliance_,
                  isActive: isshow
                };
                this.storage.push(radar_);
                this.ALL.push(radar_);
              } else if (
                objectName_ === "交换机设备" ||
                objectName_ === "路由器" ||
                objectName_ === "负载均衡器" ||
                objectName_ === "板卡" ||
                objectName_ === "网卡" ||
                objectName_ === "HBA卡" ||
                objectName_ === "IP" ||
                objectName_ === "子网" ||
                objectName_ === "VLAN" ||
                objectName_ === "安全域" ||
                objectName_ === "防火墙"
              ) {
                let radar_ = {
                  object: objectName_,
                  自动采集覆盖率: coverage_,
                  数据完整率: tage_,
                  数据合规率: compliance_,
                  isActive: isshow
                };
                this.network.push(radar_);
                this.ALL.push(radar_);
              } else if (
                objectName_ === "VNF" ||
                objectName_ === "VNF子模块" ||
                objectName_ === "租户"
              ) {
                let radar_ = {
                  object: objectName_,
                  自动采集覆盖率: coverage_,
                  数据完整率: tage_,
                  数据合规率: compliance_,
                  isActive: isshow
                };
                this.VNF.push(radar_);
                this.ALL.push(radar_);
              } else {
                let radar_ = {
                  object: objectName_,
                  自动采集覆盖率: coverage_,
                  数据完整率: tage_,
                  数据合规率: compliance_,
                  isActive: isshow
                };
                this.ALL.push(radar_);
              }
            }
            this.radarData.rows = this.assembly;
            this.messege = this.assembly;
            this.instanceTotal = sum;
          })
        )
        .catch(err => {
          console.log(err.message);
        });
    },
    timeConversion(timeNow) {
      var date = new Date(timeNow);
      var dateTime =
        date.getFullYear() +
        "-" +
        this.checkTime(date.getMonth() + 1) +
        "-" +
        this.checkTime(date.getDate());
      return dateTime;
    },
    checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
  }
};
</script>

<style lang="scss">
.content-cont {
  // padding: -30px;
  width: 100%;
  height: 100%;
  .dropdown {
    position: absolute;
    z-index: 9999888;
    top: 20px;
    right: 20px;
    color: #fff;
    span {
      padding-right: 15px;
      font-size: 2rem;
      &:after {
        padding-left: 10px;
        content: "▽";
      }
    }
    ul {
      padding: 5px 0;
      margin: 5px 0;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      li {
        font-size: 1.5rem;
        text-align: center;
        &:hover {
          background: rgba(175, 238, 238, 0.2);
          cursor: pointer;
        }
      }
    }
  }
  .top-box {
    display: flex;
    width: 100%;
    height: 70px;
    overflow: hidden;
    .top {
      width: 1/3 * 100%;
      background: rgba(35, 72, 135, 0.4);
      margin-left: 10px;
      margin-right: 10px;
      .top-left {
        width: 50%;
        line-height: 70px;
        color: #fffff8de;
        float: left;
        padding-left: 4rem;
        font-size: 1.5rem;
      }
      .top-right {
        float: right;
        color: #25f3e6;
        width: 40%;
        font-size: 4rem;
        line-height: 70px;
        text-align: right;
        padding-right: 3rem;
      }
    }
    .right {
      flex: 1;
      padding-left: 15px;
      .content {
        width: 100%;
        height: 100%;
        background: rgba(35, 72, 135, 0.4);
        .number-box {
          width: 50%;
          float: left;
        }
      }
    }
  }
  .content-box {
    padding-top: 30px;
    overflow: hidden;
    display: flex;
    width: 100%;
    .vLine {
      width: 1/3 * 100%;
      background: rgba(35, 72, 135, 0.4);
      margin-left: 10px;
      margin-right: 10px;
      .top-right {
        float: right;
        color: #25f3e6;
        width: 40%;
        font-size: 4rem;
        line-height: 70px;
        text-align: right;
        padding-right: 3rem;
      }
    }
  }
  .content-bottom {
    padding-top: 30px;
    overflow: hidden;
    display: flex;
    width: 100%;
    .vRadar {
      width: 2/3 * 100%;
      // background: rgba(35, 72, 135, 0.4);
      margin-left: 10px;
      margin-right: 10px;
    }
    .vMessage {
      width: 1/3 * 100%;
      // background: rgba(35, 72, 135, 0.4);
      margin-left: 10px;
      margin-right: 10px;
      float: left;
      .tab {
        margin: 0 auto;
        width: 90%;
        color: #fff;
        .el-tabs__item {
          color: #fff;
        }
      }
    }
  }
}
</style>